<template>
    <!-- <div class="viewer" :id='viewer'>
         <img src='$factoryLink' /> 
    </div> -->
    <div id="main">
        <!-- <img src='../assets/quanjing.jpg'/> -->
        <div  id="viewer1" v-show="this.pshow">
            <h2 style="text-align:center">欢迎来到服务厅全景图</h2>
            <p style="font-size:16px;margin:0px; padding:0px;">目前经纬度</p>
            <div style="float:left"><p style="font-size:12px;margin:0px; padding:0px;">经度：</p><span style="font-size:12px;float:left" id="long"></span></div>
            <div style="float:right"><p style="font-size:12px;margin:0px; padding:0px;">纬度：</p><span style="font-size:12px" id="lat"></span></div>
             <!-- <button @click="initPhotoSphere">显示全景图</button> -->

        </div>
    </div>
    
</template>

<script>
// import PhotoSphereViewer from 'photo-sphere-viewer'
import {Viewer} from 'photo-sphere-viewer'
import MarkersPlugins from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
import * as Three from 'three' 

//     var THREE   = require('three');
//     var PhotoSphereViewer   = require('photo-sphere-viewer');
export default {
    data() {
        return {
            pshow:true,
            use:true,
            psv:'',
            id:'',
            readyLoad:'',
            imageLoaded:'',
            longitude:'',//目前经度
            latitude:'',//目前纬度
            marker3:require('../assets/logo.png'),
            imageloading:[
                {
                    imgurl:require('../assets/0400.jpg'),
                    marker:[
                    {
                        id:'image1',
                        image:require('../assets/pin1.png'),
                        width:35,
                        height:35,
                        longitude: 10,
                        latitude: 100,
                        anchor:'bottom center',
                        className:'markers',
                        tooltip:{
                            content : '欢迎进入下一场景',
                            position: 'bottom left'
                        },
                        visible:true
                    },
                    {
                        id:'image2',
                        image:require('../assets/pin2.png'),
                        width:35,
                        height:35,
                        longitude: 20,
                        latitude:-0.15,
                        anchor:'bottom center',
                        className:'markers',
                        tooltip:{
                            content : '欢迎进入下一场景',
                            position: 'bottom left'
                        },
                        visible:true
                    }]
                },
                {
                    imgurl:require('../assets/0100.jpg'),
                     marker:[
                    {
                        id:'image3',
                        image:require('../assets/pin1.png'),
                        width:35,
                        height:35,
                        longitude: 10,
                        latitude: 100,
                        anchor:'bottom center',
                        className:'markers',
                        tooltip:{
                            content : '欢迎进入下一场景',
                            position: 'bottom left'
                        },
                        visible:true
                    }]
                }
            ],   
        };
    },
    created () {
        
    },
    mounted () {
        this.initPhotoSphere(this.imageloading[0]);
      
    },
    methods: {
        initPhotoSphere:function(temp_img){
                const viewers=new Viewer({
                // Container
                container: document.getElementById('viewer1'),
                // Panorama, given in base 64
                panorama: temp_img.imgurl,

                

                // // Deactivate the animation
                // time_anim: false,

                // loading_img: this.img,
                // enabled: 'false',
                caption: '珠海移动营业厅',
                // Display the navigation bar
                navbar:true,
                size: {
                    width: '100%',
                    height: this.isMobile()? screen.availHeight : '100%'
                },
                plugins: [
                    [MarkersPlugins,{
                        // time_anim: false,
                        // fisheye:true,
                        scale: 1,
                    markers:temp_img.marker
                    }], 
                ],
            });


            viewers.on('position-updated',function(po){
                var span1 = document.getElementById('long');
                span1.innerHTML = po.args[0].longitude;

                var span2 = document.getElementById('lat');
                span2.innerHTML = po.args[0].latitude;
            
            })

            const markersPlugin = viewers.getPlugin(MarkersPlugins);

            markersPlugin.on('select-marker', (e, marker) => {
                
                
                if(marker.id=='image1') {
                   // alert(e);
                    // this.pshow = false;
                    // this.use = true;
                    viewers.setPanorama(require('../assets/0100.jpg')).then(() => {

                        markersPlugin.setMarkers(this.imageloading[1].marker);

                        markersPlugin.on('select-marker',(e,marker) => {
                            if(marker.id=='image3') {
                                viewers.setPanorama(this.imageloading[0].imgurl).then(() =>{
                                    markersPlugin.setMarkers(this.imageloading[0].marker);
                                });
                            }
                        })
                            
                    });
                    

                    
                }
                if(marker.id=='image2'){
                  //  alert(e);
                     viewers.setPanorama(require('../assets/0100.jpg')).then(() => {

                        markersPlugin.setMarkers(this.imageloading[1].marker);

                        markersPlugin.on('select-marker',(e,marker) => {
                            if(marker.id=='image3') {
                                viewers.setPanorama(this.imageloading[0].imgurl).then(() =>{
                                    markersPlugin.setMarkers(this.imageloading[0].marker);
                                });
                            }
                        })
                            
                    });
                    

                }
            
            });
            
            
        },
        // changeinitPhotoSphere(temp_img){
        //     // if(this.viewers1 != ''){
        //     //     this.viewers1.destory();
        //     // }
        //         const viewers1=new Viewer({
        //         // Container
        //         container: document.getElementById('viewer1'),
        //         // Panorama, given in base 64
        //         panorama: temp_img.imgurl,
        //         // // Deactivate the animation
        //         // time_anim: false,

        //         // loading_img: this.img,
        //         // enabled: 'false',
        //         caption: '珠海移动营业厅',
        //         // Display the navigation bar
        //         navbar:true,
        //         size: {
        //             width: '100%',
        //             height: this.isMobile()? screen.availHeight : '100%'
        //         },
        //         plugins: [
        //             [MarkersPlugins,{
        //                 // time_anim: false,
        //                 // fisheye:true,
        //                 scale: 1,
        //             markers:temp_img.marker
        //             }], 
        //         ],
        //     });
        //     const markersPlugin1 = viewers1.getPlugin(MarkersPlugins);
        //     markersPlugin1.on('select-marker', (e, marker) => {
        //         if(marker.id=='image3') {
        //             viewers1.setPanorama(require('../assets/0400.jpg')).then(() => {
        //                 viewers1.destory();
        //                 this.initPhotoSphere(this.imageloading[0]);
        //             });
        //         }
        //     });
        // },
        isMobile() {

        let ua = navigator.userAgent;

        let ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

            isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
            isAndroid = ua.match(/(Android)\s+([\d.]+)/),
            isMobile = isIphone || isAndroid;
            return isMobile;

        }
    }
}
</script>

<style>
    .hi{
        color: red;
        font-size: 20px;
        text-align: left;
    }
</style>